<template>
  <basic-container>
    <dataList
      placeholder="请输入报销名称"
      :pageInfo="pager"
      :listData="tableData"
      searchName="reimbursementName"
      :menuList="[]"
      :filterList="filterList"
      noPadding
    >
      <el-table :data="tableData" align="left" ref="multipleTable">
        <el-table-column label="报销编号" prop="reimbursement_nm" width="170" />
        <el-table-column label="申请时间" prop="req_start_time" width="160">
          <template slot-scope="scope">{{formatDate(scope.row.req_start_time) }}</template>
        </el-table-column>
        <el-table-column label="报销名称" prop="reimbursement_name" min-width="240" show-overflow-tooltip />
        <el-table-column prop="req_type" align="left" label="报销类型" min-width="160" show-overflow-tooltip>
          <template slot-scope="scope">{{scope.row.req_type | dict('reimbursement_type')}}</template>
        </el-table-column>
        <el-table-column label="申请资金（元）" prop="req_price" min-width="160" :formatter="priceFormatter" />
        <el-table-column width="150" label="操作" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" @click="toLook(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </dataList>
    <infodialog ref="infodialog"></infodialog>
  </basic-container>
</template>

<script>
import {
  fetchList,
  getObj,
  addObj,
  putObj,
  delObj
} from "@/views/wy-reimbursement/api/reimbursement";
import infodialog from "./new-reimbursement-info-dialog";
export default {
  name: "new-reimbursement",
  components: { infodialog },
  provide () {
    return {
      initList: this.getListData
    };
  },
  beforeMount () {
    this.getListData();
  },
  data () {
    return {
      tableData: [],
      approveTemplateName: "",
      params: {
        current: 1,
        size: 10,
        reimbursementName: ""
      },
      timeData: [],
      filterList: [
        {
          label: "报销申请时间",
          inputType: "daterange",
          name: ["applyStartTime", "applyEndTime"]
        },
        {
          label: "报销类型",
          inputType: "dict",
          dictName: "reimbursement_type",
          name: "approveTemplates",
          multiple: true
        }
      ],
      loading: false,
      multipleSelection: [],
      pager: {
        total: 0, // 总页数
        current: 1, // 当前页数
        size: 10 // 每页显示多少条
      }
    };
  },
  computed: {
    reimbursement_type () {
      return this.getDict('reimbursement_type')
    }
  },

  methods: {
    formatDate (date) {
      //设置时间转换格式

      date = new Date(date);
      var y = date.getFullYear(); //获取年

      var m = date.getMonth() + 1; //获取月

      m = m < 10 ? "0" + m : m; //判断月是否大于10

      var d = date.getDate(); //获取日

      d = d < 10 ? "0" + d : d; //判断日期是否大10

      return y + "-" + m + "-" + d; //返回时间格式
    },
    getListData (params = {}) {
      this.loading = true;
      let requestData = { ...this.params, ...params };
      fetchList(requestData)
        .then(res => {
          const { current, size, total, records } = res.data.data;
          this.tableData = records;
          this.params = requestData;
          this.pager = { total, current, size };
        })
        .finally(() => {
          this.loading = false;
        });
    },
    //qh+:查看一条数据
    toLook (row) {
      this.$refs.infodialog.show(row);
    },
  }
};
</script>



